<template>
    <div class="collect-page">
        <van-nav-bar title="面经收藏" fixed/>
        <van-list 
            style="margin-bottom: 40px;margin-top: 40px;"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <!-- 默认情况下，只有在原生的标签，菜鸟绑定DOM原生的事件
        如果想给自定义标签（组件）绑定DOM原生事件，就需要使用native修饰符
        -->
            <ArticleItem v-for="item in list" :key="item.id" :item="item" @click.native="$router.push(`/detall/${item.id}`)"></ArticleItem>
        </van-list>
        
        </div>
    </template>
    <script>
    //导入接口
    import { getCollectList } from "@/api/article";
        export default{
            name:'collect-page',
            data() {
                return {
                    //1.当前页
                    page:1,
                    //每页数量
                    pageSize:5,
                    //排序规则
                    //文章列表
                    list:[],
                    //加载更多动画
                    loading:false,
                    //是否全部加载完毕
                    finished:false
    
                }
            },
            methods:{
                //加载下一页
            async  onLoad(){
                //请求列表
                const data =  await  getCollectList({
                    page:this.page,
                    pageSize:this.pageSize,
                })
                
                console.log(data)
                //把下一页的数据添加到list的末尾
                this.list.push(...data.data.rows)
                //每次请求之后页码自增1
                this.page++
                this.loading = false //关闭动画
                //如果服务器数据加载完毕
                if(data.data.rows.length === 0 ){
                    this.finished = true
                }
                },
            }
        }
    </script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .article-page a {
        color: lightgray;
    }
    </style>